<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套路由</title>
<script src="../JS/vue.js"></script>
<script src="../JS/vue-router.js"></script>

</head>
<body>
<style type="text/css">
body{
font-family:微软雅黑}
a{
text-decoration:none}
.nav{
width:300px;
height:30px;
line-height:30px;
background:#CCCCCC}
ul{
list-style:none;}
.nav ul li{
float:left;
margin-left:20px;}
.content{
clear:both;
}
.content ul li{
float:left;
margin-left:20px;
font-size:14px}
h3{
clear:both;
margin-left:30px;
padding-top:20px;}
</style>
<div id="example">
  	<div class="nav">
		<ul>
			<li>
				<router-link to="/football">足球</router-link>
			</li>
			<li>
				<router-link to="/basketball">篮球</router-link>
			</li>
		</ul>
  	</div>
	<div class="content">
		<router-view></router-view>
	</div>
</div>
<script type="text/javascript">
var Football = {//定义Football组件
	template : `<div>
		<ul>
			<li><router-link to="/football/italy">意甲联赛</router-link></li>
			<li><router-link to="/football/spain">西甲联赛</router-link></li>
		</ul>
		<router-view></router-view>
	  </div>`
}
var Basketball = {//定义Basketball组件
  	template : `<div>
		<ul>
			<li><router-link to="/basketball/cba">CBA</router-link></li>
			<li><router-link to="/basketball/nba">NBA</router-link></li>
		</ul>
		<router-view></router-view>
	  </div>`
}
var routes = [
	{	//默认渲染Football组件
		path: '', 
		component: Football,
	},
    { 
		path: '/football', 
		component: Football,
		children:[//定义子路由
            {
                path: "italy",
                component: {
					template: '<h3>AC米兰稳居三甲</h3>'
				}
            },
			{
                path: "spain",
                component: {
					template: '<h3>梅西上演帽子戏法</h3>'
				}
            }
        ]
	},
	{ 
		path: '/basketball', 
		component: Basketball,
		children:[//定义子路由
            {
                path: "cba",
                component: {
					template: '<h3>易建联PK四大外援</h3>'
				}
            },
			{
                path: "nba",
                component: {
					template: '<h3>火箭豪取12连胜</h3>'
				}
            }
        ]
	}
]
var router = new VueRouter({
  	routes
})
var app = new Vue({
	el: '#example',
  	router
});
</script>













</body>
</html>